<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6_固定定位广告条</title>
    <style>
      .top {
          height: 120px;
          background-color: #5aa4ae;
          color: #fff;
          font-size: 30px;
          position: fixed;
          top: 0;
          /* 视口 ViewPort 视口宽度vw 视口高度vh 值为整数,为视口的百分比*/
          width: 100vw;/* 100%的视口宽度 */
      }
      .left,.right {
          width: 60px;
          height: 200px;
          position: fixed;
          top: 300px;
      }
      .left {
          background-color: #fff799;
          left: 20px;
      }
      .right {
          background-color: #f35336;
          right: 20px;
      }
      .main {
          margin-top: 130px;
      }
    </style>
</head>
<body>
<div>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut deserunt exercitationem itaque neque odit
            omnis provident quia quidem quod. Accusantium aperiam ipsam iusto nemo nostrum provident quae repellat
            soluta?
        </div>
        <div>Accusantium dicta in inventore nulla odit praesentium qui quo quod ratione rem, reprehenderit soluta,
            ullam! Adipisci amet aut commodi cupiditate eos et id laudantium magnam minima, molestiae obcaecati officiis
            quaerat.
        </div>
        <div>Beatae corporis cum dignissimos dolorum eaque enim facere, impedit, officiis perspiciatis placeat rem,
            sequi sint voluptates. A, architecto commodi consequuntur ducimus harum officiis, quos reprehenderit rerum
            sed sint sit, vel.
        </div>
        <div>Consequatur error fugiat, fugit ipsum labore modi natus quis sit soluta temporibus. Aliquam animi beatae
            nobis vero! Est iste, iure. Dicta eius explicabo facere magnam, non placeat ratione reprehenderit soluta.
        </div>
        <div>Aspernatur deleniti deserunt ducimus hic inventore libero mollitia nisi perferendis provident repellat
            sunt, velit? A accusantium, ad, adipisci aliquam eaque eveniet fuga incidunt nihil odio provident quaerat
            quam repellendus temporibus.
        </div>
        <div>Distinctio fuga magni neque sequi? Aperiam autem, culpa dolores expedita illo ipsum, maxime minima odio
            quae quam, quisquam voluptate? Accusamus blanditiis consequatur impedit labore laborum quasi quisquam
            ratione, saepe! Quasi.
        </div>
        <div>Ad blanditiis cupiditate nostrum quaerat quasi, quod quos ratione rerum sed? Impedit incidunt inventore
            itaque necessitatibus quis rerum suscipit voluptatem! Asperiores aut consequatur deleniti excepturi minus
            nesciunt, omnis provident velit.
        </div>
        <div>Doloribus eaque explicabo fugiat fugit iste perferendis ratione reprehenderit soluta tempora vero! Aut
            consectetur fuga fugit optio sed? A accusamus aliquid dolorum eius laboriosam nostrum omnis quidem
            repellendus totam veniam?
        </div>
        <div>Ad culpa dolorem earum ex labore laudantium magni natus nemo officiis perferendis quaerat qui, ratione,
            repellendus repudiandae, sed tempora ullam voluptate voluptates. Assumenda expedita iure laboriosam
            perferendis soluta sunt veniam.
        </div>
        <div>Aliquid amet architecto consectetur, cumque delectus deserunt doloremque dolores harum illum in incidunt
            minima natus nesciunt odit officia omnis optio placeat quas quibusdam quisquam rerum soluta sunt unde
            voluptas voluptatibus?
        </div>
        <div>Asperiores atque dicta doloremque hic illo, in pariatur porro quasi soluta. Ab consectetur, distinctio eum
            id magni modi non officia quos sed similique sunt tempora? Blanditiis molestiae quod repellendus voluptates?
        </div>
        <div>Aliquid amet facere ipsum molestiae tenetur. Ab accusamus beatae laboriosam molestias nemo obcaecati
            praesentium quam quia voluptatem voluptatum! Adipisci alias cupiditate dolore error et molestias non
            obcaecati unde. Animi, voluptatem.
        </div>
        <div>Architecto nesciunt sit velit! Aliquid consectetur consequuntur debitis delectus dolore ex, harum incidunt
            labore libero nihil, numquam obcaecati omnis possimus quod reprehenderit similique tenetur velit veniam
            veritatis vitae? Eligendi, odio.
        </div>
        <div>Aperiam autem corporis dicta, dignissimos fugit illo illum, ipsa laudantium neque, odio perspiciatis sint
            totam ut velit voluptates. Ab debitis eos expedita magni optio quae quas quasi reiciendis similique sunt!
        </div>
        <div>Adipisci aliquid amet animi atque cumque eveniet, impedit labore maxime nisi voluptate! Beatae dolorem
            doloremque earum eius fugit hic minus numquam perferendis possimus praesentium quibusdam quo, repudiandae
            tempore vitae voluptatum!
        </div>
        <div>Aspernatur assumenda dolor dolores, eos eum iste laboriosam molestiae perferendis temporibus veniam
            veritatis vero voluptatum? Assumenda, aut blanditiis consectetur debitis eaque eum fuga iusto rem sapiente
            similique totam ullam unde?
        </div>
        <div>Commodi culpa et facere incidunt iste minus non quae reprehenderit soluta ullam. Ab consectetur delectus
            distinctio est id ipsam, iusto laborum nisi, odit officia officiis omnis quod suscipit temporibus totam?
        </div>
        <div>Consequatur dolores eos ex itaque magni neque quam quia quos, recusandae sapiente. Adipisci asperiores at
            aut distinctio eos harum illo ipsam minus neque nisi officiis, optio perspiciatis quo sunt unde.
        </div>
        <div>Aliquid, blanditiis dicta distinctio explicabo fugiat fugit in iste iusto magni maxime, necessitatibus non
            quae quasi quia quos recusandae repellendus reprehenderit sunt voluptates voluptatum. Ad consequuntur
            dignissimos non quia veniam.
        </div>
        <div>Aut culpa cum dolorum laudantium magnam minima nam nostrum quasi, reiciendis sed. Illum impedit ipsa
            molestias odio quae qui ut velit voluptate! Dolorum impedit, in nemo possimus reiciendis veritatis
            voluptatibus?
        </div>
        <div>Architecto beatae consequuntur deleniti distinctio dolores doloribus ea illum iste iure molestiae natus,
            nemo quae quas quisquam saepe, suscipit temporibus! Ad asperiores eaque facilis maxime neque porro quasi
            qui, voluptate.
        </div>
        <div>A blanditiis culpa fuga iusto magnam magni, minima natus neque nulla perferendis, placeat quos recusandae
            saepe, sequi sint veniam veritatis. Dicta dolorum itaque maiores neque, officia possimus sapiente sequi
            suscipit?
        </div>
        <div>Atque deleniti eligendi itaque non porro possimus quisquam rerum soluta temporibus ullam! Ab ad animi
            commodi ea et labore minima molestias nisi numquam odio praesentium quidem tempore, totam ut voluptatibus.
        </div>
        <div>Harum ipsa iure nesciunt officiis possimus quibusdam quisquam repellendus sed veritatis voluptatum.
            Accusamus ad corporis deserunt dolorem doloribus eius, est et, nulla obcaecati optio quaerat quam quidem
            sapiente sint, vel?
        </div>
        <div>Adipisci animi blanditiis consequuntur ea esse exercitationem illo inventore ipsam itaque laboriosam
            laborum minus molestiae nobis, nulla placeat quae qui reprehenderit sint, temporibus tenetur totam ullam
            veniam veritatis vero voluptates.
        </div>
        <div>Cum error perferendis saepe soluta! Atque, facere possimus? Alias cumque dignissimos doloribus, eius eos
            est hic, laborum, magnam quibusdam ratione recusandae reprehenderit similique ullam? Inventore ipsa magnam
            odit provident repudiandae.
        </div>
        <div>Aliquid amet, asperiores consequuntur cumque delectus, dolores enim est, explicabo facere illum in
            inventore maxime minima nihil odio praesentium quis quisquam saepe sequi soluta tempore veniam veritatis
            vero voluptatem voluptatum.
        </div>
        <div>Accusantium aperiam commodi inventore, ipsa ipsum neque nihil non quidem ut. At consequatur culpa dicta
            dignissimos earum fugit laborum, laudantium nobis officiis pariatur quaerat, quam ratione, reiciendis
            suscipit velit voluptate.
        </div>
        <div>A ad aut deserunt eligendi eos fugiat fugit harum illum inventore, itaque laborum magnam magni neque nobis
            obcaecati officiis pariatur qui quibusdam recusandae repudiandae rerum sit unde vel voluptates voluptatibus!
        </div>
        <div>Accusantium aliquam aperiam beatae culpa, deserunt distinctio eius error id ipsa iusto, minima modi natus
            neque, nihil obcaecati placeat quam quisquam ratione rem tempora ullam veniam vero voluptatibus? Culpa,
            dicta.
        </div>
        <div>Ad aut blanditiis eius, facilis fuga illum odio quia quisquam sint temporibus. Consequuntur dignissimos
            dolores, laborum libero nemo obcaecati omnis quaerat quia quibusdam quod repellendus tempora tempore vel
            vero voluptatem.
        </div>
        <div>Accusamus, at doloribus eaque sapiente veniam voluptatum. Aliquam aspernatur atque deleniti dolore expedita
            facere fuga harum iusto, maxime odio officiis pariatur porro quaerat quas quos recusandae repellat sapiente
            soluta veritatis.
        </div>
        <div>Aliquam animi asperiores, dignissimos dolore doloremque dolores eum, excepturi facere fugit impedit
            inventore ipsum iste molestiae nam necessitatibus nobis odio placeat possimus quam quasi quia quod
            reprehenderit temporibus totam, voluptate.
        </div>
        <div>A animi asperiores atque consectetur, cupiditate doloremque enim eum eveniet excepturi fugit illo illum
            iusto, libero minima minus odit possimus quae quidem quo sequi, totam ullam veritatis. Distinctio, eveniet
            explicabo!
        </div>
        <div>Ab adipisci asperiores assumenda, eaque error, facilis illo, in minima nesciunt nihil odio quae rem
            reprehenderit repudiandae rerum tempore veniam. Dolores earum est labore quibusdam quod rerum temporibus
            totam, voluptatibus?
        </div>
        <div>Aperiam architecto aspernatur consequatur dolorem eaque eos ex excepturi, expedita facilis hic illum in
            magni natus, omnis provident quaerat quis sed similique suscipit voluptates! Exercitationem, iure optio!
            Commodi, laboriosam minus.
        </div>
        <div>Aperiam commodi dolorum est labore, perferendis quasi. Cupiditate magni maxime quae quis ratione sapiente
            vero. Consequuntur dolores illum ipsa neque rem repudiandae rerum vitae? Adipisci dolor earum minus nihil
            quisquam!
        </div>
        <div>Adipisci alias delectus deserunt laborum mollitia nesciunt omnis optio sunt! Aperiam aut consectetur
            deserunt et iusto non quibusdam sapiente. Debitis eius error est ex nihil numquam provident quibusdam sit
            voluptas.
        </div>
        <div>A adipisci autem beatae doloribus est, ex fugit, laudantium magnam nemo obcaecati quasi quisquam quod
            ratione sit ullam. Accusantium et hic molestias natus optio perspiciatis quisquam recusandae voluptates.
            Iste, tempora!
        </div>
        <div>Accusantium corporis ea est fugit incidunt itaque iusto nesciunt obcaecati, ut? Alias aliquid architecto
            beatae blanditiis dicta doloremque est fugit molestias nam numquam quae quaerat, quis quod repellat tempora
            vitae.
        </div>
        <div>Ad beatae dicta, dolorem enim illo impedit inventore itaque laborum nihil perferendis quam, reiciendis vero
            voluptas! Aspernatur consequuntur deserunt esse eveniet illum iste maiores, modi optio placeat quas
            reprehenderit unde?
        </div>
        <div>Accusantium at dolorem eaque, reprehenderit sed sit veritatis. Accusamus atque beatae consectetur corporis,
            culpa cum deserunt dolorum eum iusto modi neque nihil, nostrum officiis quae quod repudiandae vel voluptatem
            voluptates.
        </div>
        <div>Consequatur cum et facere fuga fugit hic id iste, iure mollitia nihil, nobis nulla possimus quae quidem,
            sequi. Assumenda atque, culpa deleniti incidunt ipsam laboriosam maxime nostrum obcaecati porro ratione!
        </div>
        <div>Ad at delectus dolorem enim illo impedit laborum natus, nihil numquam odio odit optio pariatur quia
            repellendus rerum temporibus ut vero vitae voluptatem voluptatum! Dolores eum explicabo provident quam
            quisquam.
        </div>
        <div>Corporis cumque, deserunt, dolorem expedita inventore laudantium minus nisi non odit reiciendis repellendus
            rerum tempore vero? Accusantium, aspernatur delectus harum hic iure minima molestiae obcaecati officiis
            provident tempore voluptate voluptates?
        </div>
        <div>Consectetur corporis delectus eius error et fugit id in incidunt itaque iusto maiores minus modi nostrum
            nulla odit placeat possimus qui quibusdam quis quo sint, sit temporibus veniam vero voluptatum.
        </div>
        <div>Aut dolor dolorem eligendi enim et eum ex explicabo impedit laboriosam laborum laudantium, nihil pariatur
            provident quo sapiente sunt ullam vero voluptatibus. Beatae commodi deserunt doloribus explicabo facere
            optio, temporibus.
        </div>
        <div>Alias assumenda deserunt inventore maiores praesentium quas quia quibusdam quidem quod sapiente. Aliquid
            enim, exercitationem facere impedit ipsum magnam maxime non nostrum odio officia officiis perspiciatis
            provident similique sint vitae!
        </div>
        <div>Accusantium alias enim nulla perferendis perspiciatis quam ut voluptatibus! Amet consequuntur delectus
            distinctio, eos error, ex laboriosam modi optio, quidem quod quos repellendus sit! Commodi est id incidunt
            non quia.
        </div>
        <div>Aperiam aspernatur, aut consectetur cupiditate dolorem earum eveniet ex expedita facilis, fugiat harum
            illum laborum maxime minus nihil non officiis perspiciatis quibusdam quidem quisquam sapiente sint tempore
            veritatis! Cum, perspiciatis!
        </div>
        <div>Accusantium amet delectus dolorum natus nobis placeat praesentium temporibus vero voluptate. Accusamus
            consequuntur dolor doloribus in magnam omnis porro quos repellendus! Adipisci aspernatur id iure nobis
            nostrum quidem rerum sequi.
        </div>
        <div>Commodi dignissimos, distinctio dolorum minima possimus ratione reiciendis repellat? Alias beatae debitis
            ex ipsum iure magni, nulla pariatur perferendis porro quia quisquam quod repellat tempora tempore ullam.
            Corporis, dolorum, nobis.
        </div>
        <div>Harum ipsum nam quos voluptate voluptates. Asperiores eius laborum libero nam nihil obcaecati odio
            perferendis quam, quia rem repellat repudiandae sapiente sed. Ab error ex hic laboriosam nostrum placeat
            voluptatum.
        </div>
        <div>Cum quia ratione sint! Debitis quia, tempore. Ab assumenda aut autem, beatae corporis delectus ducimus
            earum excepturi fuga fugit hic incidunt iste labore libero quo. Alias dolore iusto officia recusandae!
        </div>
        <div>Cupiditate est quibusdam quidem! Asperiores, autem distinctio dolorum incidunt molestiae nisi rem sunt
            tempore totam voluptatibus? Cum dignissimos eligendi fugiat ipsa provident voluptas. Cupiditate distinctio
            dolorem doloremque, dolores perspiciatis sed.
        </div>
        <div>Aperiam architecto atque culpa dolore ducimus in ipsum magni minima modi officiis optio pariatur quaerat
            quibusdam quos reprehenderit soluta, velit voluptas voluptates. Architecto explicabo labore minus
            perferendis quis temporibus voluptatum.
        </div>
        <div>Adipisci, architecto, nemo! Aliquam asperiores eius error fuga illo natus nostrum praesentium, provident
            quam rem sunt tenetur ullam ut? Alias corporis cupiditate deserunt eligendi nisi non quo soluta voluptate!
            Error.
        </div>
        <div>Ab delectus deserunt dolore dolorem, excepturi iste mollitia nemo non officiis qui quidem quod suscipit,
            totam! At culpa dolorem, ea ex iusto quod velit. Cupiditate eligendi mollitia nam sequi unde.
        </div>
        <div>Asperiores consequatur culpa ex iusto laborum magni, modi nostrum quo quos. Accusantium, ad architecto
            consectetur distinctio dolores doloribus eveniet incidunt ipsum laudantium nisi nulla odit quia quisquam
            quos sunt veritatis.
        </div>
        <div>Ad adipisci animi atque autem dignissimos eaque est, eum eveniet exercitationem fugit harum laudantium
            magnam magni maiores nemo nulla quae reiciendis rem sint tempora ullam voluptates voluptatibus? Iure, sequi
            voluptas?
        </div>

    </div>
</div>
</body>
</html>